<template>
  <view class="page page-carousel">
    <view class="content">
      <view class="item" v-for="(item, index) in carouselList" :key="item.id">
        <view class="title">
          {{ '轮播图' + (index + 1) }}
        </view>
        <view class="item-con">
          <image :src="item.imgUrl" mode="" @click="handleEdit(item)"></image>
          <view class="information" @click="handleEdit(item)">
            <view class="type">
              <text class="type-title">链接类型</text>
              <text class="type-title" v-if="item.type">{{ carouselTypeData[item.type] }}</text>
            </view>
            <view class="line">
              {{ item.linkUrl ? `/pages_shop/goods/detail?id=${item.linkUrl}` : '--' }}
            </view>
          </view>
          <fui-icon color="#F95A5A" size="36" name="delete" @click="handleDelete(item, index)"></fui-icon>
        </view>
      </view>
    </view>
    <view class="btn">
      <fui-button :disabled="false" :margin="['24rpx','0']" disabledBackground="#DFDFDF" disabledColor="#666666" background="var(--fui-color-primary)" bold @click="tab.navigateTo('/pages/carousel/Add')">新增</fui-button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, inject } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { useStore } from 'vuex'
import carouselApi from '@/api/carousel'

const store = useStore()
const tab = inject('$tab')
const modal = inject('$modal')

const carouselTypeData = computed(() => store.getters.carouselTypeData)

const carouselList = ref([])
const getCarouselList = () => {
  try {
    carouselApi.getCarouselList().then(res => {
      if (res.code === 0 && res.data) {
        carouselList.value = res.data.list || []
      } else {
        modal.msgError('获取轮播图列表失败！')
      }
    })
  } catch(err) {
    modal.msgError('获取轮播图列表失败！')
  }
}

const handleEdit = (item) => {
  tab.navigateTo(`/pages/carousel/Add?formData=${encodeURIComponent(JSON.stringify(item))}`)
}

const handleDelete = (item, index) => {
  modal.confirm(`确认删除轮播图${index + 1}?`).then(() => {
    carouselApi.deleteCarouselItem(item.id).then(res => {
      if (res.code === 0 && res.data) {
        modal.msgError(`轮播图${index + 1}已删除！`)
        getCarouselList()
      } else {
        modal.msgError('轮播图删除失败！')
      }
    })
  })
}

onShow(() => {
  getCarouselList()
})
</script>

<style lang="scss">
.page-carousel {
  padding-bottom: 144rpx;
  .btn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    box-sizing: border-box;
    padding: 0 36rpx;
  }
}
.content {
  padding: 0 36rpx;
  .item {
    background: #ffffff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    opacity: 1;
    padding: 26rpx 24rpx 26rpx 32rpx;
    &:not(:last-child) {
      border-bottom: 2rpx dashed #ddd;
    }
    .title {
      font-size: 24rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      color: #333333;
    }
    .item-con {
      margin-top: 10rpx;
      display: flex;
      align-items: center;

      image {
        width: 184rpx;
        height: 108rpx;
        display: block;
        background-color: #f8f8f8;
        flex-shrink: 0;
      }
      .information {
        margin-left: 20rpx;
        margin-right: 24rpx;
        .type-title {
          font-size: 24rpx;
          font-weight: 400;
          color: #999999;
        }
        .type-title:last-child {
          font-size: 24rpx;
          font-weight: bold;
          color: #333333;
        }
        .type-title:first-child {
          padding-right: 20rpx;
        }
        .line {
          width: 368rpx;
          font-size: 20rpx;
          font-weight: 400;
          color: #999999;
          margin-top: 8rpx;
          overflow: hidden;
        }
      }
    }
  }
}
</style>